<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表情弹窗效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #e0f7fa, #bbdefb);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 20px;
        overflow: hidden;
        position: relative;
      }

      body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 10% 20%, rgba(179, 229, 252, 0.2) 0%, transparent 20%),
          radial-gradient(circle at 90% 80%, rgba(179, 229, 252, 0.2) 0%, transparent 20%);
        z-index: -1;
      }

      .page-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }

      .open-btn {
        background: rgba(255, 255, 255, 0.2);
        color: #1565c0;
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 15px 30px;
        font-size: 18px;
        border-radius: 12px;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        font-weight: 600;
        letter-spacing: 1px;
        position: relative;
        overflow: hidden;
        z-index: 1;
      }

      .open-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transform: translateX(-100%);
        transition: transform 0.6s ease;
        z-index: -1;
      }

      .open-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(33, 150, 243, 0.3);
        background: rgba(255, 255, 255, 0.3);
      }

      .open-btn:hover::before {
        transform: translateX(100%);
      }

      .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        backdrop-filter: blur(5px);
      }

      .modal-overlay.active {
        display: flex;
      }

      .content {
        width: 600px;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background: rgba(255, 255, 255, 0.25);
        flex-direction: column;
        padding: 20px 0;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(12px);
        overflow: hidden;
      }

      .content::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: rotate(45deg);
        z-index: -1;
        animation: shine 6s infinite linear;
      }

      @keyframes shine {
        0% {
          transform: rotate(45deg) translateX(-100%);
        }
        100% {
          transform: rotate(45deg) translateX(100%);
        }
      }

      .leave-motion {
        transition: all 0.1s ease;
      }

      .emoji-head {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.7);
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        transition: all 0.1s linear;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        position: relative;
        margin-top: 80px;
        background: linear-gradient(to bottom, hsl(49deg 100% 65.29%), rgb(255, 223, 78));
      }

      .mouth {
        width: 90px;
        height: 40px;
        background: rgb(173, 36, 36);
        position: relative;
        border: 2px solid rgb(172, 12, 12);
        overflow: hidden;
        border-radius: 5px 5px 50px 50px;
      }

      .mouth .teeth {
        width: 15px;
        height: 8px;
        border-radius: 0 0 5px 5px;
        position: absolute;
        right: 20%;
        background: white;
      }

      .mouth .tongue {
        width: 40px;
        height: 45px;
        border-radius: 50%;
        position: absolute;
        bottom: -20px;
        left: 10%;
        transform: rotate(-60deg);
        background: rgb(148, 19, 19);
      }

      .cheeks {
        width: 180px;
        position: absolute;
        display: flex;
        justify-content: space-between;
        top: 52%;
        left: 50%;
        transform: translateX(-50%);
      }

      .cheek-item {
        width: 60px;
        height: 25px;
        border-radius: 50%;
        background: radial-gradient(ellipse at center, rgba(250, 147, 147, 1) 60%, rgba(202, 40, 40, 1) 90%);
      }

      .eye-white {
        width: 120px;
        position: relative;
        display: flex;
        justify-content: space-between;
        padding-top: 40px;
      }

      .eye-white-left,
      .eye-white-right {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: white;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
      }

      .eye-ball {
        position: absolute;
        border-radius: 50%;
        background: rgb(95, 3, 3);
        width: 22px;
        height: 22px;
        transition: all 0.1s linear;
      }

      .button-wrapper {
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin-top: auto;
        margin-bottom: 30px;
        gap: 20px;
      }

      .btn-primary {
        width: 120px;
        height: 45px;
        border-radius: 12px;
        text-align: center;
        line-height: 45px;
        color: white;
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        position: relative;
        overflow: hidden;
        z-index: 1;
      }

      .btn-primary::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: translateX(-100%);
        transition: transform 0.6s ease;
        z-index: -1;
      }

      .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      }

      .btn-primary:hover::before {
        transform: translateX(100%);
      }

      .success {
        background: linear-gradient(135deg, #4caf50, #2e7d32);
      }

      .danger {
        background: linear-gradient(135deg, #f44336, #c62828);
      }

      .close-btn {
        position: absolute;
        top: 15px;
        right: 20px;
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }

      .close-btn:hover {
        color: white;
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(90deg);
      }
    </style>
  </head>
  <body>
    <div class="page-container">
      <button class="open-btn" onclick="openModal()">打开弹窗</button>
    </div>

    <div class="modal-overlay" id="modalOverlay">
      <div class="content" id="modalContent">
        <button class="close-btn" onclick="closeModal()">&times;</button>
        <div class="emoji-head" id="emojiHead">
          <div class="eye-white">
            <div class="eye-white-left">
              <div class="eye-ball" id="leftEyeBall"></div>
            </div>
            <div class="eye-white-right">
              <div class="eye-ball" id="rightEyeBall"></div>
            </div>
          </div>
          <div class="mouth" id="mouth">
            <div class="teeth"></div>
            <div class="tongue"></div>
          </div>
          <div class="cheeks">
            <div class="cheek-item" id="leftCheek"></div>
            <div class="cheek-item" id="rightCheek"></div>
          </div>
        </div>
        <div class="button-wrapper">
          <div class="btn-primary success" onclick="keepAction()">保留</div>
          <div class="btn-primary danger" onclick="uninstallAction()">卸载</div>
        </div>
      </div>
    </div>

    <script>
      let visible = false;
      let leave = false;
      let hue_deg = 49;
      let cheek_alpha = 1;
      let eye_ball_diameter_scale = 1;
      let mouth_radius = [5, 5, 50, 50];
      let eye_ball_move = [90, 80, 10, 20];

      const modalOverlay = document.getElementById("modalOverlay");
      const modalContent = document.getElementById("modalContent");
      const emojiHead = document.getElementById("emojiHead");
      const leftEyeBall = document.getElementById("leftEyeBall");
      const rightEyeBall = document.getElementById("rightEyeBall");
      const mouth = document.getElementById("mouth");
      const leftCheek = document.getElementById("leftCheek");
      const rightCheek = document.getElementById("rightCheek");

      function reset() {
        hue_deg = 49;
        cheek_alpha = 1;
        eye_ball_diameter_scale = 1;
        mouth_radius = [5, 5, 50, 50];
        eye_ball_move = [90, 80, 10, 20];
        updateEmoji();
      }

      function updateEmoji() {
        emojiHead.style.background = `linear-gradient(to bottom, hsl(${hue_deg}deg 100% 65.29%), rgb(255, 223, 78))`;
        mouth.style.borderRadius = `${mouth_radius[0]}px ${mouth_radius[1]}px ${mouth_radius[2]}px ${mouth_radius[3]}px`;

        leftEyeBall.style.transform = `scale(${eye_ball_diameter_scale}) translate(-${eye_ball_move[0]}%, -${eye_ball_move[1]}%)`;
        leftEyeBall.style.left = `${eye_ball_move[0]}%`;
        leftEyeBall.style.top = `${eye_ball_move[1]}%`;

        rightEyeBall.style.transform = `scale(${eye_ball_diameter_scale}) translate(-${eye_ball_move[2]}%, -${eye_ball_move[3]}%)`;
        rightEyeBall.style.left = `${eye_ball_move[2]}%`;
        rightEyeBall.style.top = `${eye_ball_move[3]}%`;

        leftCheek.style.background = `radial-gradient(ellipse at center, rgba(250, 147, 147, ${cheek_alpha}) 60%, rgba(202, 40, 40, ${cheek_alpha}) 90%)`;
        rightCheek.style.background = `radial-gradient(ellipse at center, rgba(250, 147, 147, ${cheek_alpha}) 60%, rgba(202, 40, 40, ${cheek_alpha}) 90%)`;
      }

      function handleMouseMove(e) {
        const rect = modalContent.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        const width = 600;
        const height = 300;

        let max = 140,
          min = 49;
        let face_ratio = (max - min) / width;
        let cheek_ratio = 1 / (width - 50);
        let eye_ball_diameter_ratio = 1 / width;

        hue_deg = min + face_ratio * x;
        cheek_alpha = 1 + -1 * cheek_ratio * x >= 0.1 ? 1 + -1 * cheek_ratio * x : 0.1;
        eye_ball_diameter_scale = 1 + (eye_ball_diameter_ratio * x) / 3;
        eye_ball_move = [(x / width) * 100, (y / height) * 100, (x / width) * 100, (y / height) * 100];

        let MR = x / width;
        let MRX = 0,
          MRY = 0;
        MRX = MR * 50 < 5 ? 5 : MR * 50;
        MRY = 50 + -1 * MR * 45;
        mouth_radius = [MRX, MRX, MRY, MRY];

        updateEmoji();
      }

      function handleMouseEnter(e, flag) {
        if (!flag) {
          leave = true;
          modalContent.classList.add("leave-motion");
          reset();
          setTimeout(() => {
            leave = false;
            modalContent.classList.remove("leave-motion");
          }, 100);
        }
      }

      function openModal() {
        visible = true;
        modalOverlay.classList.add("active");
        reset();
      }

      function closeModal() {
        visible = false;
        modalOverlay.classList.remove("active");
      }

      function keepAction() {
        alert("保留操作");
        closeModal();
      }

      function uninstallAction() {
        alert("卸载操作");
        closeModal();
      }

      // 事件监听
      modalContent.addEventListener("mousemove", handleMouseMove);
      modalContent.addEventListener("mouseenter", (e) => handleMouseEnter(e, true));
      modalContent.addEventListener("mouseleave", (e) => handleMouseEnter(e, false));

      // 点击遮罩关闭弹窗
      modalOverlay.addEventListener("click", (e) => {
        if (e.target === modalOverlay) {
          closeModal();
        }
      });

      // 初始化
      updateEmoji();
    </script>
  </body>
</html>
